<template>
  <el-table ref="multipleTableRef" :data="getGoodsCart" style="width: 100%" height="470px"
    :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
    <el-table-column type="selection" width="55" />
    <el-table-column fixed prop="cover" label="图片" width="150">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="scope.row.cover" />
      </template>
    </el-table-column>
    <el-table-column fixed prop="date" label="上市日期" width="150" />
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="color" label="颜色" width="120" />
    <el-table-column prop="price" label="价格" width="120" />
    <el-table-column fixed="right" label="购买数量" width="180">
      <template #default="scope">
        <el-input-number v-model.number="scope.row.count" :min="1" :max="scope.row.inventory || 10" :precision="0" />
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="140">
      <template #default="scope">
        <el-button
          link
          type="danger"
          @click.prevent="deleteRow(scope.row.id)"
        >
          移除购物车
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="total">
    合计：￥{{ getTotalPrice }}
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia';

import useUserStore from '../store/module/user.js';

const userStore = useUserStore()

const { getGoodsCart, getTotalPrice } = storeToRefs(userStore)

const deleteRow = (id) => {
  userStore.removeGoodsCart(id)
}

</script>
<style scoped>
.total {
  text-align: right;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 3rem;
}
</style>

